<template>
  <div class="test">
    <van-nav-bar
      :title="`(${next.length})`"
      left-text="返回"
      right-text="答题卡"
      left-arrow
      @click-left="$router.back()"
      @click-right="sheetShow = true"
    />
    <div class="one">
      <span
        v-show="nowDetail.type"
        v-text="nowDetail.type == 1 ? '【单选】' : '【多选】'"
      ></span
      >{{ nowDetail.title }}
    </div>
    <a v-for="(item, index) in nowDetail.tag" :key="index">{{ item }}</a>
    <!-- //list是选项文字,type 1是单选 2是多选 answer是答案 result是选择的ABCD -->
    <any-option
      ref="option"
      :list="nowDetail.option"
      :type="nowDetail.type"
      :answer.sync="answerAbc"
      v-model="result"
    ></any-option>

    <!-- 这是答案解析 -->
    <div class="analysis" v-if="answerAbc">
      <h1>答案解析</h1>
      <div>
        正确答案:
        <span v-for="item in answerAbc" :key="item">{{ item }}</span>
      </div>
      <ul>
        <li>难度:{{ answer.difficulty }}</li>
        <li>提交次数:{{ answer.submitNum }}</li>
        <li>正确次数:{{ answer.correctNum }}</li>
      </ul>
      <p>{{ answer.answerAnalysis }}</p>
    </div>
    <!-- 这是提交部件 -->
    <van-goods-action>
      <van-goods-action-icon
        icon="star"
        v-if="stars"
        @click="star"
        color="#ffc8d5"
        text="已收藏"
      />
      <van-goods-action-icon v-else icon="star-o" @click="star" text="收藏" />
      <van-goods-action-icon icon="edit" @click="edit" text="反馈" />
      <div class="num">{{ num + 1 }}/{{ next.length }}题</div>
      <van-button
        type="danger"
        v-if="!answerAbc"
        :disabled="!result"
        @click="submits()"
        >提交</van-button
      >
      <van-button type="info" v-else @click="goNext()">下一题</van-button>
    </van-goods-action>
    <!-- 这是意见反馈 -->
    <van-dialog
      v-model="show"
      title="意见反馈"
      show-cancel-button
      @confirm="nihao()"
    >
      <van-field
        v-model="message"
        rows="10"
        autosize
        type="textarea"
        placeholder="请输入留言"
      />
    </van-dialog>
    <!-- 这是答题卡弹出 -->
    <van-popup
      v-model="sheetShow"
      position="bottom"
      :style="{ height: '100%' }"
    >
      <sheet
        v-if="sheetShow"
        :list="next"
        :answerList="sheetList"
        @hide="sheetShow = false"
        @huigu="review"
      ></sheet>
    </van-popup>
  </div>
</template>

<script>
import anyOption from './option.vue'
import {
  getTest,
  submit,
  getNewTest,
  questionsComment,
  questionsCollect
} from '@/api/test'
import Sheet from './sheet.vue'
export default {
  components: { anyOption, Sheet },
  data () {
    return {
      sheetShow: false, // 答题卡弹出
      message: null, // 意见框输入的值
      show: false, // 意见反馈显示
      nowDetail: {}, // 当前题目
      result: null, // 按钮返回的选项
      answerAbc: null, // 请求的答案
      answer: null, // 请求返回的解析
      num: 0, // 第几题
      next: [], // 通过num获取第几题的id发请求
      tiemr: true, // 防抖
      sheetList: [] // 做过的题的数组
    }
  },
  computed: {
    stars () {
      return (
        this.$store.state.login.userInfo.collectQuestions &&
        this.$store.state.login.userInfo.collectQuestions.includes(
          this.next[this.num] && this.next[this.num].id
        )
      )
    }
  },
  async created () {
    // console.log(this.$route)
    // 进来的瞬间获取第一个题目
    const res = await getTest({
      type: this.$route.query.id,
      city: this.$route.query.city
    })
    this.nowDetail = res.data.data[0].detail
    this.next = res.data.data
    this.$set(this.nowDetail, 'id', res.data.data[0].id)
  },
  methods: {
    // 提交题目
    submits () {
      // 防抖
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        // 如果是单选就发这个请求

        if (this.nowDetail.type === 1) {
          const res = await submit({
            id: this.nowDetail.id,
            singleAnswer: this.result
          })
          this.answer = res.data.data
          this.answerAbc = this.answer.singleAnswer
        } else {
          // 如果是复选就发这个请求
          const res = await submit({
            id: this.nowDetail.id,
            multipleAnswer: this.result
          })
          this.answer = res.data.data
          this.answerAbc = this.answer.multipleAnswer
        }
        this.sheetList[this.num] = {
          nowDetail: this.nowDetail, // 当前题目
          answerAbc: this.answerAbc, // 答案ABC
          isRight: this.answer.isRight,
          answer: this.answer, // 解析
          result: this.result
        }

        // 执行完了解除按钮
        this.timer = true
      }, 500)
    },
    goNext () {
      // 防抖
      clearTimeout(this.timer)
      this.timer = setTimeout(async () => {
        // 否则就请求新的数据
        this.num++
        if (this.sheetList[this.num] === undefined) {
          if (this.num >= this.next.length) {
            this.$toast('没题了')
          } else {
            const res = await getNewTest(this.next[this.num].id)
            this.nowDetail = res.data.data
            this.$set(this.nowDetail, 'id', this.next[this.num].id)
          }
        } else {
          Object.assign(this.answer, this.sheetList[this.num].answer)
          this.answerAbc = [...this.sheetList[this.num].answerAbc]
          Object.assign(this.nowDetail, this.sheetList[this.num].nowDetail)
          this.$nextTick(() => {
            this.answerAbc = [...this.sheetList[this.num].answerAbc]
            this.$refs.option.set(this.sheetList[this.num].result)
          })
        }
        this.timer = true // 执行完了解除按钮
      }, 500)
    },
    // 反馈弹框
    edit () {
      this.show = true
    },
    // 反馈
    async nihao () {
      await questionsComment({
        content: this.message,
        question: this.next[this.num].id
      })
      this.$toast.success('反馈成功')
    },
    // 点赞收藏
    async star () {
      await questionsCollect(this.next[this.num].id)
      this.$store.dispatch('login/getUse')
      setTimeout(() => {
        this.$toast.success('收藏成功')
      }, 200)
    },
    // 回滚题目
    review (val) {
      // console.log(this.sheetList[val])
      if (this.sheetList[val] !== undefined) {
        this.num = val
        Object.assign(this.answer, this.sheetList[val].answer)
        // console.log(this.sheetList[val].answerAbc)
        Object.assign(this.nowDetail, this.sheetList[val].nowDetail)
        // this.$refs.option.set(this.sheetList[this.num].result)
        this.$nextTick(() => {
          this.answerAbc = [...this.sheetList[this.num].answerAbc]
          this.$refs.option.set(this.sheetList[this.num].result)
        })
      } else {
        this.num = val - 1
        this.goNext()
      }
      this.sheetShow = false
    }
  }
}
</script>

<style lang="less">
.test {
  margin-bottom: 55px;
  margin-top: 50px;
  .van-nav-bar {
    position: fixed;
    width: 100%;
    top: 0;
    left: 0;
    .van-nav-bar__title.van-ellipsis {
      font-size: 12px;
      color: #ccc;
      &::before {
        content: '面试题';
        font-size: 18px;
        color: #000;
      }
    }
    .van-icon-arrow-left {
      color: #000;
    }
    .van-nav-bar__text {
      color: #000;
    }
  }
  .one {
    padding: 15px 4vw 5px;
    text-align: left;
  }
  a {
    margin: 5px 0 0 4vw;
    padding: 0 2px 0;
    background-color: #f7f4f5;
  }
  //解析
  .analysis {
    padding: 0 4vw;
    h1 {
      font-size: 24px;
      margin: 10px 0;
    }
    div {
      span {
        margin: 0 15px;
      }
    }
    ul {
      margin: 10px 0;
      background-color: #f7f4f5;
      display: flex;
      li {
        flex: 1;
        &:last-child {
          text-align: right;
        }
      }
    }
  }
  //提交
  .van-goods-action {
    padding: 0 20px 0 10px;
    display: flex;
    .num {
      flex: 1;
    }
    div {
      text-align: center;
    }
    .van-button {
      width: 97px;
      height: 40px;
      border-radius: 5px;
    }
  }
  .van-field {
    background-color: #f7f4f5;
    margin: 10px;
    width: 90%;
    height: 160px;
    border-radius: 4px;
    margin: 15px auto;
    // padding: 0;
    // overflow: auto;
  }
}
</style>
